<!-- 商品详情页面模板结构 -->
<template>
  <div class="detail-container">
    <div class="phone-detail">
      <img :src="phone.image" :alt="phone.model" class="detail-image" />
      <div class="detail-info">
        <h2>{{ phone.model }}</h2>
        <p>品牌: {{ phone.brand }}</p>
        <p>价格: ¥{{ phone.price }}</p>
        <p>成色: {{ phone.condition }}</p>
        <p v-if="phone.stock">库存: {{ phone.stock }}件</p>
        <p v-if="phone.rating">评分: {{ phone.rating }}/5</p>
        <button @click="addToCart">加入购物车</button>
      </div>
    </div>
    <button @click="goBack" class="back-button">返回</button>
  </div>
</template>

<!-- 商品详情逻辑 - 定义商品详情相关状态和方法 -->
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const phones = ref([
  {
    id: 1,
    brand: '苹果',
    model: 'iPhone 13',
    price: 3999,
    image: 'https://example.com/iphone13.jpg',
    condition: '95新',
    stock: 10,
    rating: 4.8,
    description: 'A15仿生芯片，超视网膜XDR显示屏，5G网络',
    specs: '6.1英寸 OLED, 128GB存储, 双摄像头',
    warranty: '官方保修剩余3个月'
  },
  {
    id: 2,
    brand: '华为',
    model: 'Mate 40 Pro',
    price: 3499,
    image: 'https://example.com/mate40.jpg',
    condition: '9成新',
    stock: 5,
    rating: 4.8,
    description: '麒麟9000芯片，超感知徕卡电影影像系统',
    specs: '6.76英寸 OLED, 256GB存储, 三摄像头',
    warranty: '无官方保修'
  },
  {
    id: 3,
    brand: '小米',
    model: 'Redmi K60',
    price: 2499,
    image: 'https://example.com/redmi.jpg',
    condition: '全新',
    stock: 15,
    rating: 4.5,
    description: '骁龙8+ Gen1处理器，2K高光屏',
    specs: '6.67英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修1年'
  },
  {
    id: 4,
    brand: 'OPPO',
    model: 'Find X5',
    price: 2999,
    image: 'https://example.com/oppo.jpg',
    condition: '98新',
    stock: 8,
    rating: 4.7,
    description: '马里亚纳X影像芯片，哈苏手机影像系统',
    specs: '6.55英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修剩余6个月'
  },
  {
    id: 5,
    brand: 'vivo',
    model: 'X90 Pro',
    price: 3799,
    image: 'https://example.com/vivo.jpg',
    condition: '95新',
    stock: 3,
    rating: 4.9,
    description: '天玑9200芯片，蔡司一英寸T*主摄',
    specs: '6.78英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修剩余9个月'
  }
])

const route = useRoute()
const phone = ref({})

onMounted(() => {
  const phoneId = parseInt(route.params.id)
  const foundPhone = phones.value.find(p => p.id === phoneId)
  if (foundPhone) {
    phone.value = foundPhone
  } else {
    router.push('/')
  }
})

const addToCart = () => {
  // 加入购物车逻辑
  console.log('Added to cart:', phone.value)
}

const goBack = () => {
  router.go(-1)
}
</script>

<!-- 商品详情页面样式 -->
<style scoped>
.detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.phone-detail {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}
.detail-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
.detail-info {
  flex: 1;
}
.back-button {
  padding: 8px 16px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: pointer;
}
</style>